<template>
	<!-- 标签是=使用小程序的组件 跨平台的组件用view he text -->
	<view class="content">
		<button @click="back">返回</button>
		<img src="../../static/es6.png" alt="" />
		<swiper
			:indicator-dots="true"
			:autoplay="true"
			:interval="3000"
			:duration="1000"
			indicator-active-color="#fcc"
		>
			<swiper-item>
				<img src="../../static/banner01.jpeg" alt="" mode="widthFix" class="img_swiper" />
			</swiper-item>
			<swiper-item>
				<img src="../../static/es6.png" mode="widthFix" class="img_swiper" />
			</swiper-item>
		</swiper>

		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{ title }}</text>
			<view class="box">盒子</view>
			<button @click="onclick" type="primary">按钮</button>
		</view>
		<cpnImage ref="imgRef"></cpnImage>

		<text>垂直滚动</text>
		<scroll-view scroll-y="true" class="scroll" show-scrollbar="false">
			<view class="item">item</view>
			<view class="item">item</view>
			<view class="item">item</view>
			<view class="item">item</view>
			<view class="item">item</view>
			<view class="item">item</view>
		</scroll-view>

		<text>水平滚动</text>
		<scroll-view scroll-x="true" class="scroll-x" show-scrollbar="false">
			<view class="item">item</view>
			<view class="item">item</view>
			<view class="item">item</view>
			<view class="item">item</view>
			<view class="item">item</view>
			<view class="item">itm</view>
		</scroll-view>
	</view>
</template>

<script>
import cpnImage from '@/components/image/image.vue';
export default {
	data() {
		return {
			title: 'Helo',
			background: ['color1', 'color2', 'color3'],
			indicatorDots: true,
			autoplay: true,
			interval: 2000,
			duration: 500
		};
	},
	//页面的什么周期
	onLoad(options) {
		console.log(this.$refs.imgRef); //vue
		let app = getApp(); //h5 weapp app/andrio
		console.log(app.globalData);
		//query  data
		console.log('options', options);

		const eventchannel = this.getOpenerEventChannel();
		eventchannel.on('acceptData', data => {
			console.log(data);
		});
	},
	components: {
		cpnImage
	},
	methods: {
		onclick() {
			console.log('primary');
			console.log(this.$refs.a);
		},
		back() {
			uni.navigateBack({
				delta: 1
			});
			const event = this.getOpenerEventChannel();
			event.emit('back', {
				data: 'back data~'
			});
		},

		changeIndicatorDots(e) {
			this.indicatorDots = !this.indicatorDots;
		},
		changeAutoplay(e) {
			this.autoplay = !this.autoplay;
		},
		intervalChange(e) {
			this.interval = e.target.value;
		},
		durationChange(e) {
			this.duration = e.target.value;
		}
	}
};
</script>

<style lang="scss">
.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.logo {
	height: 200rpx;
	width: 200rpx;
	margin-top: 200rpx;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 50rpx;
}

.text-area {
	display: flex;
	justify-content: center;
}

.title {
	font-size: 36rpx;
	color: #8f8f94;
}
.box {
	background-color: $hy-color;
	color: $uni-color-primary;
}
// 滚动必须给高度
.scroll {
	height: 150rpx;
	border: 1px solid $hy-color;
	.item {
		height: 80rpx;
		border: 1px solid $uni-color-primary;
	}
}

.scroll-x {
	display: flex;
	justify-content: space-between;
	flex-direction: row;
	white-space: nowrap;
	height: 150rpx;
	border: 1px solid $hy-color;
	.item {
		flex: 1;
		display: inline-block;
		height: 80rpx;
		width: 150rpx;
		border: 1px solid $uni-color-primary;
	}
}

.box2 {
	width: 100vw;
	display: flex;
	justify-content: space-between;
	background-color: powderblue;
	view {
		flex: 1;
		text-align: center;
		background-color: pink;
	}
}
.a {
	weight: 150rpx;
}

swiper {
	width: 100%;
	height: 450rpx;
}

.img_swiper {
	width: 100%;
}
</style>
